<div class="col-12" id="mainClientExceptionContainer">
  <br/>
  <div class="alert alert-default-success alert-dismissable">
    提示：请升级cachecloud-client-redis版本到2.0.1-RELEASE及以上！
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true"></button>
  </div>

  <form method="get" action="${request.contextPath}/client/show/index" id="clientExceptionStatisticsForm">
    <div class="row justify-content-end">
      <label class="col-form-label col-auto" style="font-weight:bold;text-align:left;">
        &nbsp;查询日期:&nbsp;&nbsp;
      </label>
      <div class="col-auto">
        <input type="date" class="form-control" size="20" name="searchDate" id="searchDate" value="${searchDate}">
      </div>
      <input type="hidden" name="appId" value="${appId}">
      <input type="hidden" name="tabTag" value="app_client_exception_statistics">
      <div class="col-auto">
        <label>&nbsp;<input type="submit" class="btn btn-info" value="查询"/></label>
      </div>
    </div>
  </form>


  <script type="text/javascript">
    var searchDate = '${searchDate}';
    var appId = '${appId}';
    var chartParams = "&searchDate=" + searchDate;
    //应用下各客户端命令统计
    var appClientExceptionStatisticsMap = '${appClientExceptionStatisticsJson}';
    var appClientExceptionStatisticsJson = eval("(" + appClientExceptionStatisticsMap + ")");

    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });
    Highcharts.setOptions({
      colors: ['#2f7ed8', '#E3170D', '#0d233a', '#8bbc21', '#1aadce',
        '#492970', '#804000', '#f28f43', '#77a1e5',
        '#c42525', '#a6c96a']
    });

    $(document).ready(
            function () {
              var data = appClientExceptionStatisticsJson;

              var count_unit = "次数";
              var count_appTotalOptions = getOption("countContainer", "<b>" + "异常次数</b>", count_unit);
              count_appTotalOptions.series = getClientStatisticsByType(data, 'count', count_unit, searchDate);
              var count_appTotalchart = new Highcharts.Chart(count_appTotalOptions);

              //cost
              var cost_unit = "毫秒";
              var cost_appTotalOptions = getOption("costContainer", "<b>" + "异常平均耗时</b>", cost_unit);
              cost_appTotalOptions.series = getClientStatisticsByType(data, 'cost', cost_unit, searchDate);
              var cost_appTotalchart = new Highcharts.Chart(cost_appTotalOptions);

            });
  </script>
  <div class="page-header">
    <h4>异常情况全局统计</h4>
    <ul>
      <li><a target="_blank" href="${request.contextPath}/client/show/exceptionStatistics/client?appId=${appId}&searchDate=${searchDate}&exceptionType=0">
        <#if appClientGatherStat?? && (appClientGatherStat['conn_exp_count'])??>
          <#assign conn_exp_count = appClientGatherStat['conn_exp_count']>
        <#else>
          <#assign conn_exp_count = '0'>
        </#if>
        <#if !(conn_exp_count??)><#assign conn_exp_count = '0'></#if>
        客户端连接异常详情（${conn_exp_count}次）
      </a>
      </li>
      <li><a target="_blank" href="${request.contextPath}/client/show/exceptionStatistics/client?appId=${appId}&searchDate=${searchDate}&exceptionType=1">
        <#if appClientGatherStat?? && (appClientGatherStat['cmd_exp_count'])??>
          <#assign cmd_exp_count = appClientGatherStat['cmd_exp_count']>
        <#else>
          <#assign cmd_exp_count = '0'>
        </#if>
        <#if !(cmd_exp_count??)><#assign cmd_exp_count = '0'></#if>
        客户端命令超时详情（${cmd_exp_count}次）
      </a>
      </li>
    </ul>
  </div>
  <div id="countContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
  <br/>
  <div id="costContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
  <br/>

</div>